

<template>
    <view ref="mode" class="mode">
        <view class="key f-sb-c">
            <view class="key-num ">
                <view  :hover-start-time="0" :hover-stay-time="0" class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('1')">1</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('2')">2</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('3')">3</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('4')">4</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('5')">5</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('6')">6</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('7')">7</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  hover-stop-propagation class="keynum num" hover-class="red1" @click="setnum('8')">8</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  hover-stop-propagation class="keynum num" hover-class="red1" @click="setnum('9')">9</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  hover-stop-propagation class="keynum flex a-item j-content char"  hover-class="red1" @click="closefun">取消</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  hover-stop-propagation class="keynum num" hover-class="red1" @click="setnum('0')">0</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  hover-stop-propagation class="keynum num" hover-class="red1"  @click="setnum('.')">.</view>
            </view>
            <view class="btn">
                <view  :hover-start-time="0" :hover-stay-time="0"  class="delete flex a-item j-center char" @click="del" hover-class="red1" >
                    <image class="delImg" src="http://121.41.75.32:8002/file/static/delete.png" ></image>
                </view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="delete flex a-item j-center char" @click="remove" hover-class="red1" >清零</view>
                <view>
<!--                    <view  :hover-start-time="0" :hover-stay-time="0"  class="delete flex a-item j-center char" @click="yes" hover-class="red1" >确认</view>-->
                    <view  :hover-start-time="0" style="height: 200rpx" :hover-stay-time="0"  class="delete flex a-item j-center char" @click="addGoods" hover-class="red1">确认</view>
                </view>
            </view>

        </view>
    </view>
</template>

<script>
export default {
    name: "keyboard",
    mounted() {
        // const keyDom = this.$refs.mode.$el
        // keyDom.addEventListener("mousedown", function(e){
        //     e.preventDefault()
        // }, );
    },
    methods:{
        setnum(e) {
            this.$emit('num',e)
        },
        remove(){
            this.$emit('remove',)
        },
        yes(){
            this.$emit('yes',)
        },
        del(){
            this.$emit('del',)
        },
        addGoods(){
            this.$emit('addGoods',)
        }
    }
}

</script>
<style scoped lang="scss">
.mode {
  width: 100%;
  .f-c-c{
    display:flex;
    justify-content: center;
    align-items: center;
  }
  .f-sb-c{
    display:flex;
    justify-content: space-between;
    align-items: center;
  }

  .inp {
    height: 90rpx;
    background-color: #f1f1f1;

    .text {
      width: 100%;
      display: flex;
      height: 62rpx;
      background-color: #fff;
      border-radius: 8rpx;
    }
  }

  .key {
    width: 100%;
    .key-num {
      width: 588rpx;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      background-color: rgb(103,103,103);
      .keynum {
        flex-wrap: wrap;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 25vw;
        height: 100rpx;
        color: #ffffff;
        font-family: 微软雅黑;
        font-size: 36rpx;
        border: rgb(103,103,103) 1px solid;
      }
      .keynum0 {
        width: 354rpx;
      }
    }

    .btn {
      width: 174rpx;
      background-color: rgb(103,103,103);
      .delete {
        height: 100rpx;
        border: rgb(103,103,103) 1px solid;
        color: #ffffff;
        font-family: 微软雅黑;
        font-size: 36rpx;
      }

      .confirm {
        text-align: center;
        height: 200rpx;
        box-shadow: #dcdcdc 2px 1px 3px 0px;
        font-family: 微软雅黑;
        color: #ffffff;
        font-size: 36rpx;
      }
    }
  }
}
.num{
  background-color: rgb(69,64,68);

}
.char{
  background-color: rgb(48,46,49);
}
.delImg{
  width: 70rpx;
  height: 70rpx;
}
.cursor{
  border-left: #07bb07 solid 1px;
  height: 50rpx;
  animation: cursor-blinks 1.2s infinite steps(1, start);
}

@keyframes cursor-blinks {
  0% {
    opacity: 1;
    display: block;
  }
  50% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
.red1{
    background-color: #ee5c2b !important;
}
</style>
